import React, { Component } from 'react'
import { InputNumber, Form, Input, Modal } from 'antd'

const FormItem = Form.Item
class SystemProcessModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
    }
  }

  showModelHandler = (e) => {
    if (e) {
      e.stopPropagation()
    }
    this.setState({
      visible: true,
    })
  };
  cancelModelHandler = () => {
    this.props.form.resetFields()
    this.hideModelHandler()
  };
  hideModelHandler = () => {
    this.props.form.resetFields()
    this.setState({
      visible: false,
    })
  };
  okHandler = () => {
    const { onOk } = this.props
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values)
        this.hideModelHandler()
      }
    })
  };

  render () {
    const { children } = this.props
    const { getFieldDecorator } = this.props.form
    const { appId, appName, appLevel } = this.props.record
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    }

    return (
      <span>
        <span onClick={this.showModelHandler}>
          {children}
        </span>
        <Modal
          title="租户"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.cancelModelHandler}
        >
          <Form layout={'horizontal'} onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="系统ID"
            >
              {
                getFieldDecorator('appId', {
                  initialValue: appId,
                  rules: [{ required: true, message: '系统ID不能为空!' }],
                })(<Input disabled={appId === '' || appId === null} />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="系统名称"
            >
              {
                getFieldDecorator('appName', {
                  initialValue: appName,
                  rules: [{ required: true, message: '系统名称不能为空!' }],
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="系统等级"
            >
              {
                getFieldDecorator('appLevel', {
                  initialValue: appLevel,
                  rules: [{ required: true, message: '系统等级不能为空或非数字!' }],
                })(<InputNumber min={1} max={10} defaultValue={3} />)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    )
  }
}

export default Form.create()(SystemProcessModal)
